<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="">
        <table>
            <thead>
            <h3>注册</h3>
            </thead>
            <tbody>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" v-model="username"><br>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" v-model="password"><br>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" v-model="passwords"><br>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" v-model="sex" value="0">男
                    <input type="radio" v-model="sex" value="1">女<br>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" v-model="hobby" value="0">读书
                    <input type="checkbox" v-model="hobby" value="1">体育
                    <input type="checkbox" v-model="hobby" value="2">旅游<br>
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select v-model="nationality">
                    <option value="0">中国</option>
                    <option value="1">美国</option>
                    <option value="2">德国</option>
                </select><br>
                </td>
            </tr>
            <tr>
                <td>个人简介：</td>
                <td>
                    <textarea v-model="brief" rows="5" cols="30"></textarea><br>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="提交" @click="handler">
                </td>
            </tr>
            </tbody>
        </table>
    </form>
    <script src="vue.global.js"></script>
    <script>
        Vue.createApp({
          data(){
              return{
                  username: '',
                  password: '',
                  passwords: '',
                  sex: 0,
                  hobby: ['0'],
                  nationality: 0,
                  brief: ''
              }
          },
          methods:{
              handler:function (){
                  console.log(this.username)
                  console.log(this.password)
                  console.log(this.passwords)
                  console.log(this.sex)
                  console.log(this.hobby)
                  console.log(this.nationality)
                  console.log(this.brief)

              }
          }
        }).mount('#app')
    </script>

</div>
</body>
</html>